<template>
    <div v-html="text"></div>
</template>

<script>
export default {
  name: 'highLight',
  props: {
    color: {
      type: String
    },
    keyword: {
      type: String
    },
    value: {
      type: String,
      required: true
    }
  },
  computed: {
    text() {
      let keyword = this.keyword
      let reg = new RegExp(`${keyword}`,'g');
      let str = this.value.replace(reg, `<span style="color: red">${keyword}</span>`)
      if (this.color) {
        str = `<div style="color: ${this.color}">${str}</div>`
      }
      return str
    }
  }
}
</script>

<style scoped>

</style>